import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, message, DatePicker, Select, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import {
  fetchWithdrawLog,
} from '@/services/distribution/commission'
import { connect } from 'dva'
import moment from 'moment'

const { Option } = Select
const { RangePicker } = DatePicker
const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))

const columns = [
  {
    title: '分销人ID',
    dataIndex: 'distributionId',
    key: 'distributionId',
  },
  {
    title: '姓名',
    dataIndex: 'distributionName',
    key: 'distributionName',
  },
  {
    title: '手机号',
    dataIndex: 'distributionPhoneNumber',
    key: 'distributionPhoneNumber',
  },
  {
    title: '返佣金额',
    dataIndex: 'commissionAmount',
    key: 'commissionAmount',
  },
  {
    title: '交易时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '分销单号',
    dataIndex: 'orderNumber',
    key: 'orderNumber',
  },
];
const statusList = [
  {
    label:"待返佣",
    value:0
 },
 {
    label:"已返佣",
    value:2
 },
 {
    label:"返佣失败",
    value:1
 }
]

const Record = props => {
  const { form, distribute, dispatch, role } = props
  const { merchants, stores, } = distribute
  const { manages } = role
  const { getFieldDecorator } = form
  const [data, setData] = useState([])

  useEffect(() => {
    init()
    dispatch({
      type: 'distribute/fetchMerchants'
    })
    dispatch({
      type: 'role/fetchManageList'
    })
  }, [])

  const init = async (params = {
    pageSize: 10,
    pageNo: 1,
  }) => {
    const res = await fetchWithdrawLog(params)
    res.code == 0 ? setData(res.data) : message.warning(res.msg)
  }

  const selectMerchant = (val) => {
    dispatch({
      type: 'distribute/fetchStores',
      payload: {
        supplierId: val,
        pageSize: 999,
      }
    })
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      init({
        ...values,
        startTime: values.time && moment(values.time[0]).format('YYYY-MM-DD hh:mm:ss'),
        endTime: values.time && moment(values.time[1]).format('YYYY-MM-DD hh:mm:ss'),
      })
    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
    init()
  }
  // 查询条件
  const getFields = () => {
    return(
      <>
        <Col span={8}>
          <Form.Item label={`所属商户`}>
            {getFieldDecorator(`merchantsId`, {})
              (<Select onChange={selectMerchant}>
                {merchants && merchants.map(m =>
                  <Option key={m.id}>{m.merchantName}</Option>
                )}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={`选择门店`}>
            {getFieldDecorator(`storesId`, {})
              (<Select>
                {
                  stores && stores.map(m => <Select.Option key={m.id} value={m.id}>{m.name}</Select.Option>)
                }
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={`用户类型`}>
            {getFieldDecorator(`isStaffData`, {})
              (<Select>
                {
                  manages && manages.map(m => <Select.Option key={m.id} value={m.id}>{m.name}</Select.Option>)
                }
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={`分销状态`}>
            {getFieldDecorator(`operationStatus`, {})
              (<Select>
                {
                  statusList.map(m => <Select.Option key={m.value} value={m.value}>{m.label}</Select.Option>)
                }
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={`交易时间`}>
            {getFieldDecorator(`time`, {})
              (<RangePicker showTime />)}
          </Form.Item>
        </Col>
      </>    
    )
  }
  // 按钮处理
  const handleBtn = type => {
    
  }
  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table 
        columns={columns}
        dataSource={data}
        rowKey={r => r.id}
      />
    </PageHeaderWrapper>
    )
}

export default connect(({ distribute, role }) => ({
  distribute,
  role,
}))(Form.create()(Record))
